<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <title>Babylon.js Static Page</title>
  <!-- 引入Babylon.js库 -->
  <script src="./script/babylon.js"></script>
  <script src="./script/babylonjs.loaders.min.js"></script>
  <link rel="stylesheet" href="./script/jquery-ui.css">
  <script src="./script/jquery-3.6.0.min.js"></script>
  <script src="./script/jquery-ui.js"></script>
  <style>
    body {
      margin: 0;
      overflow: hidden;
    }

    #renderCanvas {
      position: absolute;
      width: 100%;
      height: 100%;
      background-color: #333;
      /* 设置背景色为灰色（示例颜色） */
    }

    /* 添加样式以使 div 可拖动和可缩放 */
    .draggable {
      width: 200px;
      /* 设置适当的初始宽度 */
      height: 200px;
      /* 设置适当的初始高度 */
      background-color: #fff;
      color: #fff;
      text-align: center;
      line-height: 200px;
      position: absolute;
      cursor: move;
      user-select: none;
      /* 禁止文本选中 */
      z-index: 999;
      padding: 30px 0 0 0;
      display: none;
    }

    .title {
      height: 30px;
      line-height: 30px;
      font-size: 12px;
      width: 100%;
      background-color: #fff;
      color: #000;
      text-align: center;
      position: absolute;
      top: 0;
    }

    .close-button {
      position: absolute;
      top: 0px;
      /* 距离顶部的距离 */
      right: 8px;
      /* 距离右边的距离 */
      cursor: pointer;
      font-size: 13px;
      color: #333;
    }

    .close-button:hover {
      color: red;
      /* 鼠标悬停时的颜色 */
    }
  </style>
</head>

<body>
  <div id="draggableDiv" class="draggable resizable">
    <div class="title">
      视频窗口 （按住拖动）
      <span id="closeButton" class="close-button">X</span>
    </div>
    <iframe width="100%" height="100%"
      src="https://player.bilibili.com/player.html?aid=918921904&bvid=BV11u4y157pa&cid=1344795773&p=1" scrolling="no"
      border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>
  </div>
  <canvas id="renderCanvas" style="width: 100%; height: 100%"></canvas>
</body>

<script>
  // 获取canvas元素
  var canvas = document.getElementById("renderCanvas");

  // 创建一个渲染引擎
  var engine = new BABYLON.Engine(canvas, true);

  var picked = false;

  // 创建一个场景
  var scene = new BABYLON.Scene(engine);

  scene.clearColor = new BABYLON.Color4(0, 0, 0, 0); // 设置背景色为透明

  // This creates and positions a free camera (non-mesh)
  var camera = new BABYLON.ArcRotateCamera(
    "camera1",
    // (30 / 180) * Math.PI,
    0.4 * Math.PI,
    0.3 * Math.PI,
    15,
    new BABYLON.Vector3(0, 10, 10),
    scene
  );
  // var camera = new BABYLON.FreeCamera("camera1", new BABYLON.Vector3(0, 5, -10), scene);

  // This targets the camera to scene origin
  camera.setTarget(new BABYLON.Vector3(0, 1, 1));

  camera.lowerRadiusLimit = 10; // 最小缩放距离
  camera.upperRadiusLimit = 100; // 最大缩放距离

  camera.lowerBetaLimit = 0.1; // 例如，将最小俯仰角设置为 0.1 弧度（约 5.7 度）
  camera.upperBetaLimit = Math.PI / 2; // 例如，将最大俯仰角设置为 90 度

  // This attaches the camera to the canvas
  camera.attachControl(canvas, true);

  // This creates a light, aiming 0,1,0 - to the sky (non-mesh)
  // var light = new BABYLON.DirectionalLight("light", new BABYLON.Vector3(0, -10, 0), scene);

  // 创建白色环境光源，从顶部照射下来
  var light = new BABYLON.HemisphericLight(
    "light",
    new BABYLON.Vector3(0, 2, 0),
    scene
  );
  light.diffuse = new BABYLON.Color3(0.7, 0.7, 0.7); // 将漫反射强度设置为稍微暗一些的值


  var ground = BABYLON.MeshBuilder.CreateGround(
    "ground",
    { width: 500, height: 500 },
    scene
  );
  var groundMaterial = new BABYLON.StandardMaterial("groundMaterial", scene);
  var texture = new BABYLON.Texture(
    "https://cdn.0511mzone.com/model/pavement_03_disp_1k.png",
    scene
  );
  ground.position.y = 0; // 将地面放置在填土上方
  texture.uScale = 30; // 控制横向重复
  texture.vScale = 30; // 控制纵向重复
  groundMaterial.diffuseTexture = texture;
  ground.material = groundMaterial;

  const highlightLayer = new BABYLON.HighlightLayer('hl1', scene);

  var skybox = BABYLON.MeshBuilder.CreateBox(
    "skyBox",
    {
      size: 1000.0,
    },
    scene
  );
  var skyboxMaterial = new BABYLON.StandardMaterial("skyBox", scene);
  skyboxMaterial.backFaceCulling = false;
  skyboxMaterial.reflectionTexture = new BABYLON.CubeTexture(
    "https://cdn.0511mzone.com/model/sky/TropicalSunnyDay",
    scene
  );
  skyboxMaterial.reflectionTexture.coordinatesMode =
    BABYLON.Texture.SKYBOX_MODE;
  skyboxMaterial.diffuseColor = new BABYLON.Color3(0, 0, 0);
  skyboxMaterial.specularColor = new BABYLON.Color3(0, 0, 0);
  skybox.material = skyboxMaterial;

  engine.displayLoadingUI();
  // 创建一个OBJ模型加载器
  BABYLON.SceneLoader.ImportMesh(
    "",
    "https://cdn.0511mzone.com/model/",
    "file.obj",
    scene,
    function (meshes) {
      var totalModelHeight = 0;
      // 将模型缩小 100 倍
      for (var i = 0; i < meshes.length; i++) {
        meshes[i].scaling = new BABYLON.Vector3(0.00001, 0.00001, 0.00001);
      }

      // 可以在此处对加载的模型进行任何操作
      // 例如，对模型进行缩放、旋转或平移
      // 示例：meshes[0].scaling = new BABYLON.Vector3(0.1, 0.1, 0.1);
      engine.hideLoadingUI();
    }
  );

  BABYLON.SceneLoader.ImportMesh(
    "",
    "https://cdn.0511mzone.com/model/flag/",
    "file.obj",
    scene,
    function (meshes) {
      for (var i = 0; i < meshes.length; i++) {
        meshes[i].scaling = new BABYLON.Vector3(0.004, 0.004, 0.004);
        meshes[i].position.x = 0
      }
      // 在成功加载后执行的回调函数
      // 'meshes' 包含了加载的模型对象
      // 可以在这里对模型进行进一步的操作
    }
  );

  BABYLON.SceneLoader.ImportMesh(
    "",
    "https://cdn.0511mzone.com/model/tree/",
    "file.obj",
    scene,
    function (meshes) {
      for (var i = 0; i < meshes.length; i++) {
        meshes[i].scaling = new BABYLON.Vector3(0.002, 0.002, 0.002);
        meshes[i].position.x = -5
        meshes[i].position.z = -1
      }
      // 在成功加载后执行的回调函数
      // 'meshes' 包含了加载的模型对象
      // 可以在这里对模型进行进一步的操作
    }
  );


  // 导入包含多个子模型的 3D 模型
  BABYLON.SceneLoader.ImportMesh("", "https://cdn.0511mzone.com/model/shexiang/", "wuxianshexiangtou.obj", scene, function (meshes) {
    // 创建一个父级 Mesh，用于容纳所有子模型
    var parentModel = new BABYLON.Mesh("ParentModel", scene);

    meshes.forEach((mesh) => {
      mesh.scaling = new BABYLON.Vector3(0.006, 0.006, 0.006);
      mesh.isPickable = true
      mesh.parent = parentModel;
      mesh.position.x = 5
      mesh.position.y = 5
      mesh.position.z = -2.2
    });

    setClickEvent(meshes);
  });

  function setClickEvent (meshes) {
    meshes.forEach((mesh) => {
      mesh.actionManager = new BABYLON.ActionManager(scene);
      mesh.actionManager.registerAction(
        new BABYLON.ExecuteCodeAction(BABYLON.ActionManager.OnPickTrigger, function (evt) {
          picked = !picked
          highlightMeshes(meshes);
          // 获取被点击的子模型
          // const pickedMesh = evt.meshUnderPointer;
          if (picked) {
            $('#draggableDiv').show(300);
          } else {
            $('#draggableDiv').hide(300)
          }
        }),
      );
    });
  }

  function highlightMeshes (meshes) {
    // 先移除所有高亮
    highlightLayer.removeAllMeshes();

    // 为被点击的桌子添加高亮
    picked && meshes.forEach(function (mesh) {
      highlightLayer.addMesh(mesh, BABYLON.Color3.Green());
    });
  }

  // 启动渲染循环
  engine.runRenderLoop(function () {
    scene.render();
  });
</script>
<script src="./script/index.js"></script>

</html>